<template>
  <div>
    <div class="head">
      <img src="http://liufusong.top:8080/img/profile/bg.png" alt="" />
    </div>
    <div class="user" :class="{ userheight: !denglu }">
      <van-image
        round
        width="4rem"
        height="4rem"
        class="userimg"
        src="https://img0.baidu.com/it/u=2694452942,2237440162&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
      />
      <span class="uname">{{ uname || '游客' }}</span>
      <van-button v-if="denglu" type="primary" class="btu" to="/login">去登录</van-button>
      <van-button v-else type="primary" @click="logout" class="btu btu-rad">退出</van-button>
      <p v-if="!denglu">编辑个人资料<van-icon name="play" /></p>
    </div>
    <div class="footer">
      <van-grid :column-num="3" :border="false">
        <van-grid-item class="border" icon="star-o" text="我的收藏" @click="select"/>
        <van-grid-item class="border" icon="wap-home-o" text="我的出租" @click="select2"/>
        <van-grid-item class="border" icon="clock-o" text="看房记录" />
        <van-grid-item class="border" icon="idcard" text="成为房主" />
        <van-grid-item class="border" icon="manager-o" text="个人资料" />
        <van-grid-item class="border" icon="service-o" text="联系我们" />
      </van-grid>
      <img src="http://liufusong.top:8080/img/profile/join.png" alt="" />
    </div>
  </div>
</template>

<script>
import { getToken, delToken } from '@/utils/storage'
import { user, logout } from '@/api/user'
export default {
  async created () {
    const { body: { nickname } } = await user()
    this.uname = nickname
    if (getToken()) {
      this.denglu = !this.denglu
    }
  },
  data () {
    return {
      denglu: true,
      uname: ''
    }
  },
  methods: {
    select () {
      if (getToken()) {
        this.$router.push('/favorate')
      } else {
        this.$router.push('/login')
      }
    },
    select2 () {
      if (getToken()) {
        this.$router.push('/rent')
      } else {
        this.$router.push('/login')
      }
    },
    async logout () {
      await logout()
      delToken()
      this.$toast.success('爬')
      this.$router.push('/login')
    }
  }

}
</script>

<style lang="less" scoped>
.head {
  position: absolute;
  top: 0;
  z-index: -10;
  width: 100%;
  img {
    width: 100%;
  }
}
.userheight {
  height: 30% !important;
}
.user {
  position: absolute;
  background: #fff;
  width: 75%;
  height: 25%;
  top: 13%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  box-shadow: 0 0 10px 3px #ddd;
  margin: 50px auto 0;
  padding: 0 20px;
  text-align: center;
  font-size: 13px;
  .uname {
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translateX(-50%);
  }
  .btu {
    margin-top: 30%;
    height: 1.875rem;
    border-radius: 0.5rem;
    font-size: 13px;
  }
  .btu-rad {
    height: 1.25rem;
    border-radius: 0.625rem;
  }
  .userimg {
    position: absolute;
    top: -25%;
    left: 38%;
    border: 0.375rem solid #f5f5f5;
  }
  p {
    margin-top: 30px;
    font-size: 12px;
    color: #999;
  }
}
.footer {
  position: absolute;
  bottom: 5rem;
  text-align: center;
  img {
    width: 90%;
  }
  .border {
    border: none !important;
  }
}
</style>
